/*
 * @Describe: 搜索商品导航标签
 */
<template>
  <div class="item-class-show">
    <Row class="item-class-group" v-for="(items, index) in tagsInfo" :key="index" >
      <i-col class="item-class-name" span="3">{{ items.tagName }} : </i-col>
      <i-col class="item-class-select" span="21">
        <span v-for="(item, subIndex) in items.tags"  @click="choseByName" :data-name="item" :class="[choosedName==item?'selected1':'no']"><a>{{ item }}</a></span>
      </i-col>
    </Row>
  </div>
</template>

<script>
import store from '@/vuex/store';
import { mapState, mapActions, mapGetters, mapMutations } from 'vuex';
export default {
  name: 'GoodsClassNav',
  data () {
    return {
      choosedName:'',
      tagsInfo: [
        {
          tagName: '品牌',
          // 汉尚华莲 重回汉唐 如梦霓裳 南雅集 搭夫人 十三余 钟灵记 都城南庄 池夏 兰若庭 清水溪汉初 华姿仪赏
          tags: [ '汉尚华莲', '重回汉唐', '如梦霓裳', '南雅集', '搭夫人', '十三余 ', '钟灵记', '都城南庄', '池夏', '兰若庭 ', '华姿仪赏' ,'清水溪汉初']
        },
        {
          tagName: '上市年份季节',
          // 2020年春季2020年夏季2019年秋季2019年冬季2019年夏季2019年春季2018年夏季2018年秋季
          tags: [ '2020年春季', '2020年夏季', '2019年秋季', '2019年冬季', '2019年夏季', '2019年春季', '2018年夏季','2018年秋季' ]
        },
        {
          tagName: '尺码',
          // XXS XS S M 均码 L XL 2XL XXXL XXXXL
          tags: [ 'XXS', 'XS', 'S', 'M', 'L', 'XL', '2XL', 'XXXL', 'XXXXL', '其他' ]
        },
        {
          tagName: '材质',
            // 涤纶 棉 氨纶 天丝 锦纶 维纶 麻 蚕丝 腈纶 粘胶 羊毛 人造纤维
          tags: [ '涤纶', '棉', '氨纶', '天丝', '锦纶', '维纶 ', '麻', '蚕丝', '腈纶', '粘胶','羊毛','人造纤维' ]
        }
      ]
    };
  },
  methods:{
    choseByName(options){
      // console.log(options)
      let name=options.srcElement.innerText ///有一个a标签在，所以不能通过data-set直接获取
      this.choosedName=name;
      this.$store.commit('getSearchName',name)
      console.log(this.$store.state.searchName)
      this.$emit('chooseName')
      
    }
  }
};
</script>

<style scoped>
.item-class-show {
  margin: 15px auto;
  width: 100%;
  border:solid 1px #ccc;
}
.item-class-group {
  margin-top: 1px;
  height: 45px;
  border-bottom: 1px solid #ccc;
}
/* .item-class-group:first-child {
  border-top: 1px solid #ccc;
} */
.item-class-name {
  padding-left: 15px;
  line-height: 44px;
  color: #666;
  font-weight: bold;
  background-color: #f3f3f3;
}
.item-class-name:first-child {
  line-height: 43px;
}
.item-class-select span {
  margin-left: 15px;
  margin-right: 15px;
  width: 180px;
  /* color: #005aa0; */
  color:#606468;
  line-height: 45px;
  cursor: pointer;
}
/* .item-class-select span a{
  color:#606468;
} */
.item-class-select span a:hover{
  color:#da361d;
}
/* .item-class-select span a:active{
  color: #0000FF
} */
.selected1{
  background: rgb(196, 67, 67);
 

}
.selected1 a{
 color: #fff;
}
.no a{
color:#606468;
}

</style>
